<template>
  <div class="keyboard">
    <div class="keyboard-grid">
      <panel-button
        v-for="(btn, index) in buttons"
        :key="index"
        :label="btn.label"
        :icon="btn.icon"
        :sub-icon="btn.subIcon"
        color="white"
        :action="btn.action"
        :disabled="btn.disabled"
      />
    </div>
  </div>
</template>

<script>
import PanelButton from "../FunctionButton.vue";

export default {
  components: { PanelButton },
  data() {
    return {
      buttons: [
        { label: "键盘", icon: "", action: "keyboard", disabled: true },
        { label: "", icon: "el-icon-caret-top", action: "up", disabled: true },
        { label: "退格", icon: "", action: "space", disabled: true },
        {
          label: "",
          icon: "el-icon-caret-left",
          action: "left",
          disabled: true,
        },
        { label: "确认", icon: "", action: "confirm", disabled: true },
        {
          label: "",
          icon: "el-icon-caret-right",
          action: "right",
          disabled: true,
        },
        { label: "取消", icon: "", action: "cancel", disabled: true },
        {
          label: "",
          icon: "el-icon-caret-bottom",
          action: "down",
          disabled: true,
        },
        {
          label: "Tab",
          subIcon: "iconfont shuangxiangjiantou",
          icon: "",
          action: "tab",
          disabled: true,
        },
        { label: "菜单", icon: "", action: "menu", disabled: true },
        { label: "复制", icon: "", action: "copy", disabled: true },
        { label: "粘贴", icon: "", action: "paste", disabled: true },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.keyboard {
  width: 100%;
  height: 100%;
  //   background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8%;
  box-sizing: border-box;
}

.keyboard-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10%;
}
</style>